import { FaSolidUser } from "solid-icons/fa";
import { type Component, Match, Show, Switch } from "solid-js";

import JoinChatDialog from "../components/JoinChatDialog";
import ChattingUsers from "../components/ChattingUsers";
import Error from "../components/Error";
import EndCall from "../components/EndCall";
import WebCam from "../components/WebCam";
import Mic from "../components/Mic";
import Stream from "../components/Stream";
import Avatar from "../components/Avatar";
import Alert from "../components/Alert";

import useChat from "../hooks/useChat";

const ChatRoom: Component = () => {
  const { store, toggleMic, toggleWebCam, endCall } = useChat();

  return (
    <>
      <Show when={!store.error} fallback={<Error error={store.error} />}>
        <div class="bg-gray-900" style={{ height: "90vh" }}>
          <Switch>
            <Match when={store.currentStream && !store.remoteStream}>
              <section class="h-full grid place-items-center">
                <Show
                  when={store.webCam}
                  fallback={
                    <Avatar class="w-40 h-40">
                      <FaSolidUser />
                    </Avatar>
                  }
                >
                  <Stream
                    stream={store.currentStream}
                    name="You"
                    muted={true}
                  />
                </Show>
              </section>
            </Match>
            <Match when={store.currentStream && store.remoteStream}>
              <div class="h-full relative grid md:grid-cols-2 md:gap-4 place-items-center md:static">
                <section class="grid place-items-center">
                  <Show
                    when={store.remoteStream && store.remoteWebCam}
                    fallback={
                      <Avatar class="w-40 h-40">
                        <FaSolidUser />
                      </Avatar>
                    }
                  >
                    <Stream
                      stream={store.remoteStream}
                      name="Remote"
                      muted={false}
                    />
                  </Show>
                </section>
                <section class=" grid place-items-center absolute w-40 h-40 bottom-0 right-0 my-4 md:static md:w-auto md:h-auto md:my-0">
                  <Show
                    when={store.currentStream && store.webCam}
                    fallback={
                      <Avatar class="w-20 h-20 md:w-40 md:h-40 text-3xl md:text-6xl">
                        <FaSolidUser />
                      </Avatar>
                    }
                  >
                    <Stream
                      stream={store.currentStream}
                      name="You"
                      muted={true}
                    />
                  </Show>
                </section>
              </div>
            </Match>
          </Switch>
        </div>
        <div
          class="bg-gray-800 grid place-items-center"
          style={{ height: "10vh" }}
        >
          <section class="flex items-center space-x-4">
            <Mic muted={store.muted} toggleMic={toggleMic} />
            <WebCam webCam={store.webCam} toggleWebCam={toggleWebCam} />
            <EndCall endCall={endCall} />
            <ChattingUsers
              currentUser={store.currentUser}
              remoteUser={store.remoteUser}
            />
          </section>
        </div>
      </Show>
      <JoinChatDialog />

      <Show when={store.remoteMuted}>
        <Alert text="Remote Muted" />
      </Show>
      <Show when={store.muted}>
        <Alert text="You Muted" />
      </Show>
    </>
  );
};

export default ChatRoom;
